<script >
  export default {
    props:['pageScrollTop'],
    data(){
      return {
        // PageScrollTop:0,
        showBack:true
      };
    },
    onPageScroll(e) {
      this.PageScrollTop = e.scrollTop;
      console.log(e)
    },
    onReady() {
      this.showBack = getCurrentPages().length > 1;
    },
    methods:{
      back (){
        uni.navigateBack()
      },
      home(){
        uni.switchTab({url:'/pages/converge/converge'})
      }
    }
  }
</script>

<template>
  <view class="back" >
    <view class="back-one" @click="back" v-if="showBack" :class="{ action: pageScrollTop > 120 }" style="margin:0 16rpx;">
      <text class="backtext"></text>
    </view>
    <view :class="{ action: pageScrollTop > 120 }" class="back-one" @click="home" style="width: 52rpx;height: 52rpx" >
      <u-icon name="home"  size="24" :bold="false" :color="pageScrollTop > 120?'':'#fff'"></u-icon>
    </view>
  </view>
</template>

<style lang="scss">
.back{
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130rpx;
  height: 100%;
  /* #ifdef APP-PLUS */
  padding-top: 50rpx;
  /* #endif */
  /* #ifdef MP */
  padding-top: 60rpx;
  /* #endif */
  // 返回
  .back-one{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50rpx;
    height: 50rpx;
    background-color: rgba(0,0,0,0.3);
    border-radius: 100%;
    text.backtext{
      display: flex;
      width: 20rpx;
      height: 20rpx;
      border-left: 2rpx solid #FFFFFF;
      border-bottom: 2rpx solid #FFFFFF;
      transform: rotate(45deg);
    }
  }
  .action{
    background-color: transparent;
    text{
      border-color: #555555;
    }
    text.backtext{
      display: flex;
      width: 20rpx;
      height: 20rpx;
      border-left: 2rpx solid #000;
      border-bottom: 2rpx solid #000;
      transform: rotate(45deg);
    }
  }
}
</style>